<template>
  <div class="all-product">
    <div class="container">
      <div class="comtitle">
        <h2 class="comh2">全部商品</h2>
      </div>
      <div class="switch-btn clearfix">
        <div class="left">
          <a href="javascript:;" v-for="(item,index) in tabTile" :key="index"
          :class="{active:index === current}"
          @click="onChange(index)">
            {{item}}
          </a>
        </div>
        <div class="right search-box">
          <input class="search" type="text" placeholder="搜索产品">
          <img src="~/assets/images/graysearch.png" alt="">
        </div>
      </div>
      <div class="content">
        <a href="" v-for="content in contents" :key="content.index" class="item">
          <div class="pic-box">
            <img :src="content.thumb_pic" alt="">
          </div>
          <h3 class="item-title overflow">{{ content.title }}</h3>
          <div class="price clearfix">
            <div class="left">
              <span>￥{{ content.price }}/Pc</span><span class="gray">起</span>
            </div>
            <div class="right">
              <img src="~/assets/images/heart.png" alt="">
            </div>
          </div>
          <div class="cart clearfix">
            <div class="left">
              <span>{{content.moq}} Pcs</span><span class="gray">MOQ</span>
            </div>
            <div class="right">
              <img src="~/assets/images/cart-icon.png" alt="">
            </div>
          </div>
        </a>
      </div>
      <page/>
    </div>
  </div>
</template>

<script>
import Page from '@/components/common/Page.vue'

export default {
  name:'AllProduct',
  components:{
    Page
  },
  data(){
    return{
      tabTile:['包装分类','配套服务'],
      result:[],
      current:0,
      items: []
    }
  },
  created() {
    this.contents = this.items[0].contents
    this.result = this.items
  },
  methods: {
    onChange(index) {
      this.current = index
      let array = []
      for (let i = 0; i < this.result.length; i++) {
        if (index === i) {
          this.items[i] = this.result[i]
          array = this.items[i].contents
        }
      }
      this.contents = array
    }
  }
}
</script>

<style scoped>
.all-product{
  background: #F3F3F7;
  padding:127px 0 80px;
}

.switch-btn {
  font-size:16px;
  margin-top: 52px;
}
.switch-btn .left a{
  padding: 12px 86px;
  border-radius:10px;
  color: #E48B2C;
  border:1px solid #E48B2C;
}
.switch-btn .left a:last-child{
  margin-left: 20px;
}
.switch-btn .left a.active{
  color: #fff;
  background: #E48B2C;
}
.switch-btn .left a:hover{
  color: #fff;
  background: #E48B2C;
  opacity: .8;
}
.search-box{
  width: 164px;
  height: 45px;
  line-height: 45px;
  position: relative;
}
.search-box img{
  width: 20px;
  height: 20px;
  position: absolute;
  top: 14px;
  left: 15px;
}
.search-box .search{
  width: 100%;
  height: 100%;
  border-radius:10px;
  padding: 0 45px;
}
.search-box .search::placeholder{
  font-size:16px;
  color:rgba(183,183,183,1);
}
.content{
  display: flex;
  flex-wrap: wrap;
  padding-top: 55px ;

}
.content .item{
  display: block;
  width: 270px !important;
  max-width: 270px !important;
  min-width: 270px !important;
  border:1px solid #ccc;
  margin:0 9px 9px 0;
  padding: 13px 9px 20px 9px;
  background: #fff;
}
.content .item .pic-box{
  width: 246px;
  height: 246px;
}
.content .item .pic-box img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content .item .item-title{
  margin: 17px 0;
  color: #969696;
  height: 44px;
  font-size: 18px;
}
.content .item .price{
  font-size:20px;
  font-weight: bold;
  color: #E38B2E;
}
.content .item .cart{
  margin-top: 10px;
  font-size:20px;
  font-weight: bold;
  color: #E38B2E;
}
.gray{
  color: #969696;
  margin-left: 5px;
  font-weight: normal;
  font-size: 16px;
}
</style>
